<template>
  <div class="updatePwd-contain">

    <el-card class="updatepwd-card">
      <div class="head">
        <el-page-header @back="$router.back()">
        </el-page-header>
      </div>
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item class="updatepwd-form-item" label="旧密码:" prop="password">
          <el-input show-password clearable style=" width: auto;" v-model="form.password" size="small"
            placeholder="输入旧密码">
          </el-input>
        </el-form-item>
        <el-form-item class="updatepwd-form-item" label="新密码:" prop="newPassword">
          <el-input show-password clearable style=" width: auto;" v-model="form.newPassword" size="small"
            placeholder="输入新密码"></el-input>
        </el-form-item>
        <el-form-item class="updatepwd-form-item" label="验证码:" prop="inputVal">
          <el-input clearable style=" width: auto;" v-model="form.inputVal" size="small" placeholder="输入验证码">
            <template slot="append">
              <ValidCode ref="ref_validateCode" @change="changeCode" class="valiCode" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="update" size="small">确定</el-button>
      <el-button type="info" @click="reSet" size="small">重置</el-button>
    </el-card>
  </div>
</template>

<script>
import ValidCode from '@/components/ValidCode.vue';
import { updatePwdAPI } from '@/api/inf'
export default {
  components: {
    ValidCode
  },
  data() {
    return {
      form: {
        password: '',
        newPassword: '',
        inputVal: '',
      },
      checkCode: '',
      rules: {
        password: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' }
        ],
        inputVal: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ],
      },
    }
  },
  mounted() { },
  methods: {
    reSet() {
      this.form.password = ''
      this.form.newPassword = ''
      this.form.inputVal = ''
      this.$refs.form.clearValidate();
    },
    changeCode(value) {
      this.checkCode = value//获取传进来的验证码
    },
    update() {
      this.$refs.form.validate((ok) => {
        if (ok) {
          if (this.checkCode === this.form.inputVal.toUpperCase()) {//不区分大小写验证(全部转换为大写)
            this.$confirm("你确定要更改?").then(async () => {
              const res = await updatePwdAPI(this.form)
              if (res.code == 200) {
                this.$message.success("修改成功")

              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            this.$message.error("验证码错误")
          }
          this.$refs["ref_validateCode"].draw();
          this.form.inputVal = ''
        }
      })

    },

  }
}
</script>

<style scoped>
.updatePwd-contain {
  display: flex;
  align-items: center;
  justify-content: center;
}

.updatepwd-card {
  background-color: #f4f4f4;
  width: 40%;
  margin: 30px;
}

.valiCode {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.updatepwd-form-item {
  display: flex;
  align-items: center;
}
</style>
